<template>
	<view class="home">
		<!-- 导航栏 -->
		<navbar :city="city" @getLocation='getLocation'/>
		<!-- 渐变背景 -->
		<background />
		<!-- 轮播图 -->
		<homeSwiper :swiperList="swiperList" />
		<!-- 专属服务 -->
		<serviceBar :serviceBarData="serviceBarData"  />
		<!-- 菜单 -->
		<homeMenu :homeMenuData="homeMenuData"  />
		<!-- 律师列表 -->
		<lawyerList :lawyerList="lawyerList" />
		<!-- 文章列表 -->
		<articleList :articleList="articleList" />
		<!-- tabbar -->
		<tabbar />
	</view>
</template>

<script>
	import navbar from "./components/navbar/navbar.vue";
	import homeSwiper from "./components/swiper/swiper.vue";
	import serviceBar from "./components/service-bar/serviceBar.vue";
	import homeMenu from "./components/menu/menu.vue";
	import lawyerList from "./components/lawyer-list/lawyerList.vue";
	import background from "./components/background/background.vue";
	import articleList from "./components/article-list/articleList.vue";
	export default {
		components: {
			navbar,
			homeSwiper,
			serviceBar,
			homeMenu,
			lawyerList,
			background,
			articleList,
		},
		data() {
			return {
				serviceBarData: [],
				homeMenuData: [],
				swiperList: [],
				lawyerList: [],
				articleListType: '',
				articleList: [],
				city:'',
			}
		},
		async onLoad() {
			this.getHomeMenuData();
			this.getSwiperList();
			this.getLawyerList();
			this.getArticleList();
			await this.$loginStatus;
			this.getLocation();
		},
		methods: {
			async getHomeMenuData() {
				const {
					data
				} = await this.$u.post(this.$restUrl.getHomeMenuData);
				console.log('首页菜单数据>>>>>>>>>>>>>>', data);
				this.serviceBarData = data.hand;
				this.homeMenuData = data.middle.data;
			},
			async getSwiperList() {
				const {
					data
				} = await this.$u.post(this.$restUrl.getSwiperList);
				console.log('首页轮播图数据>>>>>>>>>>>>>>', data);
				this.swiperList = data;
			},
			async getLawyerList() {
				const {
					data
				} = await this.$u.post(this.$restUrl.getLawyerList);
				console.log('首页律师列表数据>>>>>>>>>>>>>>', data);
				this.lawyerList = data;
			},
			async getArticleList() {
				const {
					data
				} = await this.$u.post(this.$restUrl.getArticleType);
				console.log('首页文章类型数据>>>>>>>>>>>>>>', data);
				this.articleListType = (data.find(item => item.name == 'recommended')).id;
				console.log(this.articleListType)
				this.articleList = (await this.$u.post(this.$restUrl.getArticleListByTypeId, {
					category_id: this.articleListType,
					page_num: 3
				})).data.data;
				console.log('首页文章列表数据>>>>>>>>>>>>>', this.articleList);
			},
			getLocation(){
				this.city = this.userInfo.login_location?this.userInfo.login_location:''; 
				uni.getLocation({
					type:'gcj02',
					isHighAccuracy:true,
					success:(async (res)=>{
						console.log('当前定位>>>>>>>>>>>>>>',res)
						const options = {
							key:'XN6BZ-WIYLO-KMHWV-SKSUX-GHQCF-5AF6T',
							location:`${res.latitude},${res.longitude}`
						}
						try{
							const {result} = await this.$u.get('https://apis.map.qq.com/ws/geocoder/v1/',options);
							this.city = result.address_component.city
							await this.$u.post(this.$restUrl.updateLocation,{location:this.city});
						}catch(e){
							console.log('e>>>>>>>>>>>>>',e)
							// this.city = '获取定位失败';
						}
					}),
					fail: () => {
						// this.city = '获取定位失败';
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "./home.scss";

	.follow-main {
		width: 100%;
		height: 170rpx;
	}
</style>
